<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	.content {
		padding: 0.75rem;
	}
	.topInfo {
		height: 2rem;
		padding: 0 0.5rem;
		background: rgba(253, 207, 166, 0.3);
		border: 1px solid rgba(255, 143, 64, 0.3);
		border-radius: 0.2rem;
		font-size: 0.7rem;
		color: #FF8028;
	}
	.topInfo img {
		width: auto;
		height: 1rem;
	}
	.topInfo .money {
		color: #E73450;
	}
	.shareTitle {
		height: 2rem;
	}
	.shareTitle .copyBtn {
		color: #3F8AFF;
	}
	.shareText {
		background: #F6F7F7;
		border-radius: 0.2rem;
		padding: 0.5rem;
		font-size: 0.6rem;
		color: #333;
	}
	.sharePic {
		position: relative;
	}
	.sharePic .bigPic {
		width: 100px;
		height: 149px;
		position: relative;
		padding: 3px 0;
		overflow: hidden;
		box-sizing: content-box;
	}
	.sharePic .picList {
		position: absolute;
		left: 103px;
		top: 0;
		height: 100%;
	}
	.sharePic .picList li {
		float: left;
		width: 76px;
		height: 76px;
		padding: 3px;
		position: relative;
	}
	.sharePic .picList li .pic {
		width: 100%;
		height: 100%;
		border: 1px solid #ddd;
	}
	.sharePic .picList li .pic:before{
		z-index: 2;
	}
	.sharePic .checkIco {
		position: absolute;
		right: 0;
		top: 0;
		width: 25px;
		height: 25px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 15px 15px;
		background-image: url(../../image/common/17.png);
		z-index: 2;
	}
	.sharePic .checkIco.on {
		background-image: url(../../image/common/16.png);
	}
	#footer {
		background-color: #FFF;
		height: 2.5rem;
		padding: 0 0.75rem;
	}
	#footer > div {
		height: 2rem;
		line-height: 1.9rem;
		border: 1px solid #E73450;
		text-align: center;
		width: 47%;
		border-radius: 0.2rem;
		color: #E73450;
	}
	#footer > div.right {
		background: #E73450;
		color: #fff;
	}
</style>
</head>

<body>
<div id="data_html" class="fadePage"></div>
<script type="text/x-dot-template" id="data_tpl">
<div class="content">
	<div class="topInfo aui-flex-col aui-flex-middle" >
		<img src="../../image/common/18.png" alt="">
		<div class="flex-auto aui-ellipsis-1 aui-px-10">{{= it.title}}</div>
		<div class="money">佣金￥{{= it.data_amount}}</div>
	</div>
	<div class="shareTitle aui-flex-col aui-flex-middle aui-flex-between">
		<div>分享文案</div>
		<div class="copyBtn" id="dd" tapmode onclick="copyText2();">复制</div>
	</div>
	<div class="shareText">
		{{= it.title}}
	</div>
	<div class="shareTitle aui-flex-col aui-flex-middle aui-flex-between">
		<div>分享图片</div>
	</div>
	<div class="aui-padded-b-15 aui-border-b">
		<div class="sharePic clearfix">
			<div class="bigPic" tapmode onclick="openPhoto(0);"><img src="{{= getBigSrc() }}" alt=""><div class="checkIco on" data-src="{{= getBigSrc() }}" tapmode onclick="checkImg(this);"></div></div>
			{{ if(it.small_images[0]){ }}
			<ul class="picList aui-flex-row aui-flex-top">
				{{ for(var i in it.small_images) { }}
				<li tapmode onclick="openPhoto({{= parseInt(i)+1 }});"><div class="pic bgCover" style="background-image: url({{= it.small_images[i] }})"></div><div class="checkIco" data-src="{{= it.small_images[i] }}" tapmode onclick="checkImg(this);"></div></li>
				{{ } }}
			</ul>
			{{ } }}
		</div>
	</div>
	<div class="shareTitle aui-flex-col aui-flex-middle aui-flex-between">
		<div>朋友圈-评论区文案</div>
		<div class="copyBtn" id="bb" tapmode onclick="copyCode2()">复制</div>
	</div>
	<div class="shareText">
		 <div>【淘宝口令】 {{= it.code}}</div>
		<div>【{{= it.title}}】</div>
		{{ if(!it.coupon_info){ }}
		<div>【原价】{{= it.reserve_price}} 元</div>
		<div>【现价】{{= it.zk_final_price}} 元</div>
		{{ } }}
		{{ if(it.coupon_info){ }}
		<div>【现价】{{= it.zk_final_price}} 元</div>
		<div>【领券】{{= getCouponNum(it.coupon_info) }} 元</div>
		<div>【实付】{{= it.coupon_amount }} 元</div>
		{{ } }}
		🛍️复制口令打开手机淘宝，领券购买~
	</div>
</div>

<div class="btmFix aui-border-t aui-flex-col aui-flex-between aui-flex-middle" id="footer">
   <div class="copyBtn" id="bb" tapmode onclick="copyCode2()">复制</div>
	<div class="left"style="display:none" id="bb" tapmode onclick="copy();">复制购买口令</div>
	<div class="right" id="right" tapmode onclick="openShare()">分享给好友</div>
</div>
</body>
</script>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tap.js"></script>
<script type="text/javascript" src="../../script/clipboard.js"></script>

<script type="text/javascript">
var photoBrowser;
var GOD_INFO;
var allImgArr = [];
var shareImgArr = [];
var bigPhotoSrc = '';
apiready = function() {
	GOD_INFO = api.pageParam.DATA;
	showProgress();
	getShareImg();
	photoBrowser = api.require('photoBrowser');

};
//选择要分享的图片
function checkImg(el){
	var _this = $$(el);
	$$('.checkIco').removeClass('on');
	_this.addClass('on');
	event.stopPropagation();
}
//dot返回合成图地址
function getBigSrc(){
	return bigPhotoSrc;
}
// $$(window).resize(function(){
// 	setPicW();
// });
// function setPicW(){
// 	$$('.sharePic li').each(function(){
// 		var liH = $$(this).outerHeight();
// 		$$(this).css('width',liH+'px');
// 	});
// }

//分享给好友图片 打开选择弹窗
function openShare(){
	shareImgArr = [];
	$$('.sharePic .checkIco.on').each(function(){
		var src = $$(this).data('src');
		if(src){
			shareImgArr.push(src);
		}
	});
	api.openFrame({
		name: 'share_mask',
		url: 'widget://html/share_btm_mask.html',
		rect: {
			x: 0,
			y: 0,
			w: 'auto',
			h: 'auto'
		},
		bounces: false,
		animation: {
			type: 'fade',
			duration:300
		},
		pageParam: {
			wname: api.winName,
			fname: api.frameName,
			copyBtn: false
		}
	});
}
//选择弹窗后 分享事件
function share(scene){
	var wx = api.require('wx');

	api.download({
		url: shareImgArr[0],
		savePath : 'fs://share_img/wxshareimg.jpg',
		report : false,
		cache : false,
		allowResume : false
	}, function(ret, err) {
		if (ret.state == 1) {
			//下载成功
			realPath = ret.savePath;
			wx.shareImage({
				apiKey:'',
				scene: scene,
				thumb: '',
				contentUrl: 'fs://share_img/wxshareimg.jpg'
			}, function(ret, err) {
				if (err.code==0) {
					toast('分享成功');
				} else {
					toast('分享失败');
				}
			});
		}
	});

}
//复制口令
function copyText(){
	var clipBoard = api.require('clipBoard');
	clipBoard.set({
	    value: GOD_INFO.title + GOD_INFO.code
	}, function(ret, err) {
	    if (ret) {
	        toast('口令复制成功')
	    } else {
	        alert(JSON.stringify(err));
	    }
	});
}

//复制口令2
function copyText2(){
	console.log('复制口令');
	var clipboard = new Clipboard('#dd',{
		text:function(){
			var tex = GOD_INFO.title + GOD_INFO.code;
			return tex
		}
	})
	clipboard.on('success', function(e) {
			toast('口令复制成功')
	});

	clipboard.on('error', function(e) {
			toast('复制失败')
	});
}


//复制评论区文案
function copyCode() {
	console.log('复制评论文案');
	var clipBoard = api.require('clipBoard');
	if(GOD_INFO.coupon_info){
		var value = '【淘宝口令】 '+ GOD_INFO.code+'\n【'+GOD_INFO.title+'】\n【现价】'+GOD_INFO.zk_final_price+' 元\n【领券】'+getCouponNum(GOD_INFO.coupon_info)+' 元\n【实付】'+ GOD_INFO.coupon_amount +' 元\n🛍️复制口令打开手机淘宝，领券购买~'
	}else {
		var value = '【淘宝口令】 '+ GOD_INFO.code+'\n【'+GOD_INFO.title+'】\n【原价】'+GOD_INFO.reserve_price+' 元\n【现价】'+GOD_INFO.zk_final_price+' 元\n🛍️复制口令打开手机淘宝，购买~'
	}
	clipBoard.set({
	    value:value
	}, function(ret, err) {
	    if (ret) {
	        toast('口令复制成功')
	    } else {
	        alert(JSON.stringify(err));
	    }
	});
}
//复制评论区文案2
function copyCode2(){
	console.log('复制文案');
	var clipboard = new Clipboard('#bb', {
	 //直接通过text直接返回复印的内容
			 text: function() {
				 if(GOD_INFO.coupon_info){
			 		var value = '【淘宝口令】 '+ GOD_INFO.code+'\n【'+GOD_INFO.title+'】\n【现价】'+GOD_INFO.zk_final_price+' 元\n【领券】'+getCouponNum(GOD_INFO.coupon_info)+' 元\n【实付】'+ GOD_INFO.coupon_amount +' 元\n🛍️复制口令打开手机淘宝，领券购买~'
			 	}else {
			 		var value = '【淘宝口令】 '+ GOD_INFO.code+'\n【'+GOD_INFO.title+'】\n【原价】'+GOD_INFO.reserve_price+' 元\n【现价】'+GOD_INFO.zk_final_price+' 元\n🛍️复制口令打开手机淘宝，购买~'
			 	}
					 return value;
			 }
	 });
	 clipboard.on('success', function(e) {
			 toast('复制成功')
	 });
	 clipboard.on('error', function(e) {
			 toast('复制失败')
	 });
}





//获取分享的 合成图  并显示页面
function getShareImg() {
	var userInfo = getUserinfo();
	var shareUrl = 'http://yin2.tanfangzi.com/wx/wxhtml/best/product_detail.html?shopid='+GOD_INFO.shop_id+'&code='+GOD_INFO.code;
	var postData = {
		pict_url: GOD_INFO.pict_url,
		title: GOD_INFO.title,
		price: GOD_INFO.coupon_amount,
		original_price: GOD_INFO.zk_final_price,
		coupon_price: GOD_INFO.coupon_info,
		user_nickname: userInfo.user_nickname,
		userid: userInfo.userid,
		coupon_share_url: shareUrl
	}
	// if(!GOD_INFO.coupon_share_url){
	// 	postData.coupon_share_url = GOD_INFO.item_url;
	// 	postData.type = 2;
	// }else{
	// 	var shareUrl = GOD_INFO.coupon_share_url.replace('//','');
	// 	postData.coupon_share_url = shareUrl;
	// 	postData.type = 1;
	// }
	console.log(JSON.stringify(postData));
	api.ajax({

		url: BASE_URL + 'App/Select/shareImg',
		method: 'post',
		data: {
			values: postData
		}
	},function(ret,err){
		hideProgress();
		if(ret && ret.img){
			bigPhotoSrc = ret.img;
			var tpl = $$('#data_tpl').html();
			var tempFn = doT.template(tpl);
			$$('#data_html').html(tempFn(GOD_INFO));
			api.parseTapmode();
			setTimeout(function(){
				$$('.fadePage').addClass('show');

				$$('.checkIco').each(function(){
					var src = $$(this).data('src');
					allImgArr.push(src);
				});

			},100);
		}
	});
}

//打开大图浏览
function openPhoto(ind){
	var activeIndex = ind;
	photoBrowser.open({
	    images: allImgArr,
		activeIndex: activeIndex,
	    placeholderImg: '',
	    bgColor: '#000'
	}, function(ret, err) {
	    if (ret) {
			if(ret.eventType == 'show'){
				api.openFrame({
					name: 'photo_close',
					url: '../other/photo_close.html',
					rect: {
						x: 10,
						y: 25,
						w: 40,
						h: 40
					},
					pageParam: {
						winName: api.winName,
						frmName: api.frameName
					},
					bounces: false,
					bgColor: 'rgba(0,0,0,0)'
				});
				api.openFrame({
					name: 'photo_page',
					url: '../other/photo_page.html',
					rect: {
						x: 0,
						y: api.winHeight - 60,
						w: 'auto',
						h: 60
					},
					pageParam: {
						winName: api.winName,
						frmName: api.frameName,
						current: activeIndex,
						total: allImgArr.length,
						downloadBtn: true
					},
					bounces: false,
					bgColor: 'rgba(0,0,0,0)'
				});
			}
			if(ret.eventType == 'change'){
				api.execScript({
				    frameName: 'photo_page',
				    script: 'changeCurrent("'+ret.index+'","'+allImgArr.length+'");'
				});
			}

	    }
	});
}
//关闭大图
function closePhoto(){
	photoBrowser.close();
	api.closeFrame({
	    name: 'photo_close'
	});
	api.closeFrame({
	    name: 'photo_page'
	});
}
//下载图片到本地
function downloadPhoto(n){
	var downIndex = n;
	api.actionSheet({
		title: '',
		cancelTitle: '取消',
		destructiveTitle: '',
		buttons: ['保存此图到本地', '保存全部图片到本地']
	}, function(ret, err) {
		var buttonIndex = ret.buttonIndex;
		if(buttonIndex == 1){
			savePhoto('one',downIndex);
		}
		if(buttonIndex == 2){
			savePhoto('all');
		}
	});
}
function savePhoto(saveType,ind){
	var downInd = ind;
	var len = allImgArr.length;
	if(saveType == 'one'){
		len = 1;
	}
	var downCount = 0;
	var downSuccessCount = 0;
	for(var i=0;i<len;i++){
		if(len == 1 && saveType=='one'){
			downUrl = allImgArr[downInd];
		}else{
			downUrl = allImgArr[i];
		}
		var randomid = Math.floor(Math.random()*1000000);
		api.download({
			url: downUrl,
			savePath: api.fsDir + 'download_photo_'+ randomid +'.png',
			report: false,
			cache: false,
			allowResume: false
		}, function(ret, err) {
			if (ret.state == 1) {
				api.saveMediaToAlbum({
					path: ret.savePath
				}, function(ret, err) {
					downCount++;
					if(ret && ret.status){
						downSuccessCount++;
					}
					if ( downCount == len ) {
						if(downCount == downSuccessCount ){
							toast('保存成功');
						}else {
							toast('保存失败');
						}
					}
				});
			}
		});
	}
}
</script>
</html>
